<template>
	<view class="container">
		<view v-if="list.length>0" class="item" v-for="item in list" @click="handlexq(item)">
			<view class="userItem">
				<view class="username">{{item.username}}</view>
				<view class="lt">{{ app.language.ckxq }}</view>
			</view>
			<view class="msgcount" v-if="item.msgcount>0">{{item.msgcount}}</view>
		</view>
		<!-- 如果为数据为空显示暂无数据 -->
		<view v-if="list.length==0">
			<nullVue></nullVue>
		</view>
		<view class="qzx" v-if="usertype==1">
			<picker mode="selector" name="pcs" :range="pcssList" @change="onpcsChange">
				<view class="picker">
					<image src="/static/aikf.png"></image>
					<!-- <view>我要咨询</view> -->
				</view>
			</picker>
		</view>
	</view>
</template>

<script>
	const global = getApp().globalData;
	import config from '@/config'
	import nullVue from '@/components/null';
	import {
		getPcsList,
		getltList,
		getKfList,
		getxgList
	} from '@/api/api.js'
	export default {
		components: {
			nullVue
		},
		data() {
			return {
				app: {
					global: global,
					name: global.appName,
					language: global.language
				},
				list: [],
				pcsList: [],
				pcssList: [],
				token: "",
				userInfo: {},
				usertype: ""
			}
		},
		onLoad() {
			uni.showLoading({
				title: '加载中...',
			});
			this.getToken()
			this.getPcs()
			setTimeout(() => {
				this.gtList()
			}, 500);
		},
		onShow() {
			// 获取页面栈
			let pages = getCurrentPages()
			let currentPage = pages[pages.length - 1]

			// 如果是从其他页面返回的，则刷新数据
			if (currentPage.__pageExited) {
				this.getToken()
				this.getPcs()
				setTimeout(() => {
					this.gtList()
				}, 500);
			}

			currentPage.__pageExited = false
		},
		onHide() {
			// 标记页面已退出
			let pages = getCurrentPages()
			let currentPage = pages[pages.length - 1]
			currentPage.__pageExited = true
		},
		methods: {
			// 获取缓存
			getToken() {
				let that = this
				uni.getStorage({
					key: 'loginData',
					success: function(res) {
						console.log('resresresresres', res)
						that.token = res.data.userInfo.appToken
						that.userInfo = res.data.userInfo
					}
				});
			},
			gtList() {
				if (this.token) {
					// 查列表
					let data = {
						userToken: this.token
					}
					getltList(data).then((res) => {
						if (res.code == 200) {
							uni.hideLoading();
							this.list = res.data
							if (this.list.length > 0) {
								this.usertype = this.list[0].usertype
							}
						}

					})
				} else {
					uni.navigateTo({
						url: '../login/login',
					});
				}
			},
			// 派出所
			getPcs() {
				let data = {
					"": ""
				}
				getPcsList(data).then((res) => {
					this.pcsList = res.data
					console.log('res.data', res.data)
					if (res.code == 200) {
						for (let i = 0; i < res.data.length; i++) {
							this.pcssList.push(res.data[i].deptName);
						}
					}
				})
			},

			// 选择派出所
			onpcsChange(e) {
				uni.navigateTo({
					url: '/pages/kefu/index?deptId=' + this.pcsList[e.detail.value].deptId,
				});
			},

			handlexq(item) {
				console.log('item',item)
				console.log('token',this.token)
				uni.showLoading({
					title: '加载中...',
				});
				this.get
				let data = {
					"fromusertoken": item.apptoken,
					"tousertoken": this.token
				}
				getxgList(data).then((res) => {
					if (res.code == 200) {
						uni.hideLoading();
						uni.navigateTo({
							url: '/pages/kefu/index?deptId=' + item.apptoken,
						});
					}

				})
			}
		}

	}
</script>

<style>
	.popup {
		height: 500rpx;
		background-color: #fff;
	}

	.pcs {
		height: 500rpx;
		background-color: #fff;
	}

	.item {
		border-bottom: 1px solid #ddd;
		padding: 20rpx;
		display: flex;
	}

	.username {
		font-weight: bold;
		font-size: 25rpx;
	}

	.lt {
		font-size: 20rpx;
		color: #808080;
		margin-top: 10rpx;
	}

	.qzx {
		position: absolute;
		right: -16rpx;
		bottom: 300rpx;
		width: 136rpx;
		/* height: 150rpx; */
		font-size: 23rpx;
		/* background: #2270f3; */
		text-align: center;
		border-radius: 100rpx;
		color: #fff;
		padding: 21rpx 0;
	}

	.qzx image {
		width: 100rpx;
		height: 100rpx;
	}

	.msgcount {
		background-color: red;
		width: 28rpx;
		height: 28rpx;
		font-size: 25rpx;
		border-radius: 23rpx;
		text-align: center;
		line-height: 31rpx;
		color: #ffff;
		margin-left: auto;
		margin-top: 16rpx;
	}
</style>